<template>
    <div class="article-container">

        <el-card class="box-card">
            <div slot="header">
                <!-- 导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>文章列表</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 导航 -->
            </div>
            <!-- 查询表单 -->
            <el-form ref="form" class="searcher-form" :model="form" label-width="80px" size="mini">
                <el-form-item label="审核状态" >
                    <el-radio-group v-model="form.state" size="mini" @change="onStateChange">
                        <el-radio label="" border>全部</el-radio>
                        <el-radio label="2" border>待审核</el-radio>
                        <el-radio label="1" border>审核通过</el-radio>
                        <el-radio label="3" border>审核不通过</el-radio>
                        <el-radio label="0" border>草稿</el-radio>
                        <el-radio label="-1" border>已删除</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- 查询表单 -->
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="data-header">
                <span>筛选出{{totalCount}}条符合条件的数据</span>
            </div>
            <!-- 数据表格 -->
            <el-table
                v-loading="loading"
                class="data-form"
                :data="articleList"
                style="width: 100%">
                <el-table-column
                    width="100"
                    prop="id"
                    label="ID" align="center">
                </el-table-column>
                <el-table-column
                    prop="user.username"
                    label="用户" align="center">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题" align="center">
                </el-table-column>
                <el-table-column
                    width="100"
                    label="状态"
                    align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 1" type="primary">审核通过</el-tag>
                        <el-tag v-else-if="scope.row.state === 0">草稿</el-tag>
                        <el-tag v-else-if="scope.row.state === -1" type="info">已删除</el-tag>
                        <el-tag v-else-if="scope.row.state === 2" type="warning">审核中</el-tag>
                        <el-tag v-else-if="scope.row.state === 3" type="danger">未通过审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="分类" align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.articleChannel.type}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="发布时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.createDate | dateFormatAll}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit" circle
                            @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                        <el-button
                            size="mini"
                            type="warnning"
                            icon="el-icon-view" circle
                            @click="handleCheck(scope.$index, scope.row)"
                        ></el-button>
<!--                        <el-button-->
<!--                            size="mini"-->
<!--                            type="danger"-->
<!--                            icon="el-icon-delete" circle-->
<!--                            @click="handleDelete(scope.$index, scope.row)"-->
<!--                        ></el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 数据表格 -->
            <!-- 分页 -->
            <el-pagination
                background
                layout="prev, pager, next, sizes, total"
                @current-change="onChangePage"
                @size-change="onChangePageSize"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                :total="totalCount">
            </el-pagination>
            <!-- 分页 -->
        </el-card>

    </div>
</template>

<script>
    import {loadArticleData} from "../../api/article";

    export default {
        name: "ArticleIndex",
        data() {
            return {
                form: {
                    state: ''
                },
                articleList: [],// 数据集合
                page: 1,        // 页码
                pageSize: 10,   // 每页显示多少数据
                totalCount: 0,  // 总数据个数
                loading: false  // 是否正在加载数据
            }
        },
        created() {
            this.loadTableData()
        },
        methods: {
            onSearch() {
                this.loadTableData()
            },
            loadTableData() {
                this.loading = true     // 加载数据中
                loadArticleData({
                    'state': this.form.state,
                    'channel': this.form.channel,
                    'page': this.page,
                    'pageSize': this.pageSize
                }).then(res => {
                    const data = res.data.data
                    this.articleList = data.list
                    this.totalCount = data.total
                })
                this.loading = false     // 加载数据结束
            },
            onChangePage(page) {
                this.page = page
                this.loadTableData()
            },
            onChangePageSize(pageSize) {
                this.pageSize = pageSize
                this.loadTableData()
            },
            handleEdit(index, row) {
                // 编辑文章
                this.$router.push({path:'/editArticle',query:{
                    'id': row.id
                }})
            },
            handleCheck(index, row) {
                // 编辑文章
                this.$router.push({path:'/checkArticle',query:{
                        'id': row.id
                }})
            },
            handleDelete(index, row) {
            },
            onStateChange(val) {
                this.form.state = val
                this.loadTableData()
            }
        }
    }
</script>

<style scoped>
    .searcher-form{
        margin-top: 20px;
    }
    .box-card{
        margin-bottom: 20px;
    }
    .data-form{
        margin-bottom: 20px;
    }
</style>
